<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('审计记录列表')" />
    <th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="tabs-container">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> Request</a></li>
            <li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false"> Service</a></li>
            <li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false"> Method</a></li>
            <li class=""><a data-toggle="tab" href="#tab-4" aria-expanded="false"> Instrument</a></li>
        </ul>
        <div class="tab-content">
            <div id="tab-1" class="tab-pane active">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-12 search-collapse hidden">
                            <form id="audit-form">
                                <input type="hidden" name="entityId" th:value="${reqId}"/>
                                <div class="select-list">
                                    <ul>
                                        <li>
                                            <label>操作状态：</label><select name="operStatus" th:with="type=${@dict.getType('sys_common_status')}">
                                                <option value="">所有</option>
                                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                            </select>
                                        </li>
                                        <li class="select-time">
                                            <label>操作时间： </label>
                                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"/>
                                            <span>-</span>
                                            <input type="text" class="time-input" id="endTime" placeholder="结束时间"/>
                                        </li>
                                        <li>
                                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>

                        <div class="btn-group-sm" id="toolbar" role="group">
                            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:audit:export">
                                <i class="fa fa-download"></i> 导出
                            </a>
                        </div>

                        <div class="col-sm-12 select-table table-striped">
                            <table id="bootstrap-table1"></table>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tab-2" class="tab-pane">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-12 search-collapse hidden">
                            <form id="audit-form">
                                <input type="hidden" name="entityId" th:value="${reqId}"/>
                                <div class="select-list">
                                    <ul>
                                        <li>
                                            <label>操作状态：</label><select name="operStatus" th:with="type=${@dict.getType('sys_common_status')}">
                                                <option value="">所有</option>
                                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                            </select>
                                        </li>
                                        <li class="select-time">
                                            <label>操作时间： </label>
                                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"/>
                                            <span>-</span>
                                            <input type="text" class="time-input" id="endTime" placeholder="结束时间"/>
                                        </li>
                                        <li>
                                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>

                        <div class="btn-group-sm" id="toolbar" role="group">
                            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:audit:export">
                                <i class="fa fa-download"></i> 导出
                            </a>
                        </div>

                        <div class="col-sm-12 select-table table-striped">
                            <table id="bootstrap-table2"></table>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tab-3" class="tab-pane">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-12 search-collapse hidden">
                            <form id="audit-form">
                                <input type="hidden" name="entityId" th:value="${reqId}"/>
                                <div class="select-list">
                                    <ul>
                                        <li>
                                            <label>操作状态：</label><select name="operStatus" th:with="type=${@dict.getType('sys_common_status')}">
                                                <option value="">所有</option>
                                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                            </select>
                                        </li>
                                        <li class="select-time">
                                            <label>操作时间： </label>
                                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"/>
                                            <span>-</span>
                                            <input type="text" class="time-input" id="endTime" placeholder="结束时间"/>
                                        </li>
                                        <li>
                                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>

                        <div class="btn-group-sm" id="toolbar" role="group">
                            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:audit:export">
                                <i class="fa fa-download"></i> 导出
                            </a>
                        </div>

                        <div class="col-sm-12 select-table table-striped">
                            <table id="bootstrap-table3"></table>
                        </div>
                    </div>
                </div>
            </div>
            <div id="tab-4" class="tab-pane">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-sm-12 search-collapse hidden">
                            <form id="audit-form">
                                <input type="hidden" name="entityId" th:value="${reqId}"/>
                                <div class="select-list">
                                    <ul>
                                        <li>
                                            <label>操作状态：</label><select name="operStatus" th:with="type=${@dict.getType('sys_common_status')}">
                                                <option value="">所有</option>
                                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                                            </select>
                                        </li>
                                        <li class="select-time">
                                            <label>操作时间： </label>
                                            <input type="text" class="time-input" id="startTime" placeholder="开始时间"/>
                                            <span>-</span>
                                            <input type="text" class="time-input" id="endTime" placeholder="结束时间"/>
                                        </li>
                                        <li>
                                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>

                        <div class="btn-group-sm" id="toolbar" role="group">
                            <a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="system:audit:export">
                                <i class="fa fa-download"></i> 导出
                            </a>
                        </div>

                        <div class="col-sm-12 select-table table-striped">
                            <table id="bootstrap-table4"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: bootstrap-select-js" />
<script th:inline="javascript">
    var detailFlag = [[${@permission.hasPermi('system:audit:detail')}]];
    var commentFlag = [[${@permission.hasPermi('system:audit:comment')}]];
    var datas = [[${@dict.getType('zknj_audit_action')}]];
    var reqId = [[${reqId}]];
    var prefix = ctx + "system/request2";

    $(function() {
        var options = {
            id: "bootstrap-table1",
            url: prefix + "/auditList",
            detailUrl: prefix + "/detail/{id}",
            // exportUrl: prefix + "/export",
            // queryParams: queryParams,
            sortName: "time",
            sortOrder: "desc",
            modalName: "审计追踪",
            escape: true,
            showPageGo: true,
            rememberSelected: true,
            showSearch: false,
            // pagination: false,
            columns: [{
                field: 'state',
                checkbox: true
            },
                {
                    field: 'auditId',
                    title: '审计编号',
                    visible: false
                },
                {
                    field: 'title',
                    title: '主题',
                    formatter: function(value, row, index) {
                        return $.table.tooltip(value);
                    }
                },
                {
                    field: 'who',
                    title: '操作人员',
                    sortable: true
                },
                {
                    field: 'role',
                    title: '角色'
                },
                {
                    field: 'type',
                    title: '类型',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(datas, value);
                    }
                },
                {
                    field: 'time',
                    title: '时间',
                    sortable: true
                },
                {
                    field: 'what',
                    title: '内容',
                    formatter: function(value, row, index) {
                        var inf = [];
                        inf.push('<span class="fs-5">' + value + '</span><br/>');

                        var params = JSON.parse(row.auditParams);
                        var paramList = [];
                        var count = 0;
                        var limit = 4;
                        var maxValLen = 60; // val 截断长度

                        Object.entries(params).forEach(function([key, val]) {
                            if (key && val) {
                                if (count < limit) {
                                    var displayVal = val;
                                    if (val.length > maxValLen) {
                                        displayVal = val.substring(0, maxValLen) + '...';
                                    }

                                    paramList.push(
                                        '<li><span class="text-secondary">' + key + '</span>: ' +
                                        '<span title="' + val + '">' + displayVal + '</span></li>'
                                    );
                                }
                                count++;
                            }
                        });

                        if (paramList.length > 0) {
                            inf.push('<ul style="padding-left: 1em; margin: 0; list-style-type: disc;">' + paramList.join('') + '</ul>');
                            if (count > limit) {
                                inf.push('<span class="text-muted small">......</span>');
                            }
                        }

                        return inf.join('');
                    }
                },
                {
                    field: 'comment',
                    title: 'comment',
                    formatter: function(value, row, index) {
                        if(value == null || value == ''){
                            return '<a href="javascript:void(0)"> - </a>';
                        }
                        return '<a href="javascript:void(0)" title="查看审核意见" onclick="showComment(\'' + value + '\')"><i class="fa fa-search"></i></a>';
                    }
                },
                {
                    field: 'ip',
                    title: 'ip地址',
                    visible: false
                },
                {
                    field: 'wher',
                    title: '访问方式',
                    visible: false
                },
                {
                    field: 'operStatus',
                    title: '结果',
                    align: 'center',
                    formatter: function(value, row, index) {
                        if (value == 0) {
                            return '<span class="badge badge-primary">成功</span>';
                        } else if (value == 1) {
                            return '<span class="badge badge-danger">失败</span>';
                        }
                    }
                },
                {
                    title: '操作',
                    // align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        var detail = '<a class="btn btn-warning btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="$.operate.detail(\'' + row.auditId + '\')"><i class="fa fa-search"></i> 详细</a>';
                        var comment = '<a class="btn btn-info btn-xs ' + commentFlag + '" href="javascript:void(0)" onclick="comment(\'' + row.auditId + '\')"><i class="fa fa-edit"></i> 意见</a>';

                        if (row.comment) {
                            actions.push('<span class="badge badge-success">已评论</span>');
                        } else {
                            actions.push(comment);
                        }
                        actions.push(detail);

                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    $(function() {
        var options = {
            id: "bootstrap-table2",
            url: prefix + "/auditList2",
            detailUrl: prefix + "/detail/{id}",
            // exportUrl: prefix + "/export",
            // queryParams: queryParams,
            sortName: "time",
            sortOrder: "desc",
            modalName: "审计追踪",
            escape: true,
            showPageGo: true,
            rememberSelected: true,
            showSearch: false,
            // pagination: false,
            columns: [{
                field: 'state',
                checkbox: true
            },
                {
                    field: 'auditId',
                    title: '审计编号',
                    visible: false
                },
                {
                    field: 'title',
                    title: '主题',
                    formatter: function(value, row, index) {
                        return $.table.tooltip(value);
                    }
                },
                {
                    field: 'who',
                    title: '操作人员',
                    sortable: true
                },
                {
                    field: 'role',
                    title: '角色'
                },
                {
                    field: 'type',
                    title: '类型',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(datas, value);
                    }
                },
                {
                    field: 'time',
                    title: '时间',
                    sortable: true
                },
                {
                    field: 'what',
                    title: '内容',
                    formatter: function(value, row, index) {
                        var inf = [];
                        inf.push('<span class="fs-5">' + value + '</span><br/>');

                        var params = JSON.parse(row.auditParams);
                        var paramList = [];
                        var count = 0;
                        var limit = 4;
                        var maxValLen = 60; // val 截断长度

                        Object.entries(params).forEach(function([key, val]) {
                            if (key && val) {
                                if (count < limit) {
                                    var displayVal = val;
                                    if (val.length > maxValLen) {
                                        displayVal = val.substring(0, maxValLen) + '...';
                                    }

                                    paramList.push(
                                        '<li><span class="text-secondary">' + key + '</span>: ' +
                                        '<span title="' + val + '">' + displayVal + '</span></li>'
                                    );
                                }
                                count++;
                            }
                        });

                        if (paramList.length > 0) {
                            inf.push('<ul style="padding-left: 1em; margin: 0; list-style-type: disc;">' + paramList.join('') + '</ul>');
                            if (count > limit) {
                                inf.push('<span class="text-muted small">......</span>');
                            }
                        }

                        return inf.join('');
                    }
                },
                {
                    field: 'comment',
                    title: 'comment',
                    formatter: function(value, row, index) {
                        if(value == null || value == ''){
                            return '<a href="javascript:void(0)"> - </a>';
                        }
                        return '<a href="javascript:void(0)" title="查看审核意见" onclick="showComment(\'' + value + '\')"><i class="fa fa-search"></i></a>';
                    }
                },
                {
                    field: 'ip',
                    title: 'ip地址',
                    visible: false
                },
                {
                    field: 'wher',
                    title: '访问方式',
                    visible: false
                },
                {
                    field: 'operStatus',
                    title: '结果',
                    align: 'center',
                    formatter: function(value, row, index) {
                        if (value == 0) {
                            return '<span class="badge badge-primary">成功</span>';
                        } else if (value == 1) {
                            return '<span class="badge badge-danger">失败</span>';
                        }
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        var detail = '<a class="btn btn-warning btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="$.operate.detail(\'' + row.auditId + '\')"><i class="fa fa-search"></i> 详细</a>';
                        var comment = '<a class="btn btn-info btn-xs ' + commentFlag + '" href="javascript:void(0)" onclick="comment(\'' + row.auditId + '\')"><i class="fa fa-edit"></i> 意见</a>';

                        if (row.comment) {
                            actions.push('<span class="badge badge-info"> √ </span>');
                        } else {
                            actions.push(comment);
                        }
                        actions.push(detail);

                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    $(function() {
        var options = {
            id: "bootstrap-table3",
            url: prefix + "/auditList3",
            detailUrl: prefix + "/detail/{id}",
            // exportUrl: prefix + "/export",
            // queryParams: queryParams,
            sortName: "time",
            sortOrder: "desc",
            modalName: "审计追踪",
            escape: true,
            showPageGo: true,
            rememberSelected: true,
            showSearch: false,
            // pagination: false,
            columns: [{
                field: 'state',
                checkbox: true
            },
                {
                    field: 'auditId',
                    title: '审计编号',
                    visible: false
                },
                {
                    field: 'title',
                    title: '主题',
                    formatter: function(value, row, index) {
                        return $.table.tooltip(value);
                    }
                },
                {
                    field: 'who',
                    title: '操作人员',
                    sortable: true
                },
                {
                    field: 'role',
                    title: '角色'
                },
                {
                    field: 'type',
                    title: '类型',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(datas, value);
                    }
                },
                {
                    field: 'time',
                    title: '时间',
                    sortable: true
                },
                {
                    field: 'what',
                    title: '内容',
                    formatter: function(value, row, index) {
                        var inf = [];
                        inf.push('<span class="fs-5">' + value + '</span><br/>');

                        var params = JSON.parse(row.auditParams);
                        var paramList = [];
                        var count = 0;
                        var limit = 4;
                        var maxValLen = 60; // val 截断长度

                        Object.entries(params).forEach(function([key, val]) {
                            if (key && val) {
                                if (count < limit) {
                                    var displayVal = val;
                                    if (val.length > maxValLen) {
                                        displayVal = val.substring(0, maxValLen) + '...';
                                    }

                                    paramList.push(
                                        '<li><span class="text-secondary">' + key + '</span>: ' +
                                        '<span title="' + val + '">' + displayVal + '</span></li>'
                                    );
                                }
                                count++;
                            }
                        });

                        if (paramList.length > 0) {
                            inf.push('<ul style="padding-left: 1em; margin: 0; list-style-type: disc;">' + paramList.join('') + '</ul>');
                            if (count > limit) {
                                inf.push('<span class="text-muted small">......</span>');
                            }
                        }

                        return inf.join('');
                    }
                },
                {
                    field: 'comment',
                    title: 'comment',
                    formatter: function(value, row, index) {
                        if(value == null || value == ''){
                            return '<a href="javascript:void(0)"> - </a>';
                        }
                        return '<a href="javascript:void(0)" title="查看审核意见" onclick="showComment(\'' + value + '\')"><i class="fa fa-search"></i></a>';
                    }
                },
                {
                    field: 'ip',
                    title: 'ip地址',
                    visible: false
                },
                {
                    field: 'wher',
                    title: '访问方式',
                    visible: false
                },
                {
                    field: 'operStatus',
                    title: '结果',
                    align: 'center',
                    formatter: function(value, row, index) {
                        if (value == 0) {
                            return '<span class="badge badge-primary">成功</span>';
                        } else if (value == 1) {
                            return '<span class="badge badge-danger">失败</span>';
                        }
                    }
                },
                {
                    title: '操作',
                    // align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        var detail = '<a class="btn btn-warning btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="$.operate.detail(\'' + row.auditId + '\')"><i class="fa fa-search"></i> 详细</a>';
                        var comment = '<a class="btn btn-info btn-xs ' + commentFlag + '" href="javascript:void(0)" onclick="comment(\'' + row.auditId + '\')"><i class="fa fa-edit"></i> 意见</a>';

                        if (row.comment) {
                            actions.push('<span class="badge badge-success">已评论</span>');
                        } else {
                            actions.push(comment);
                        }
                        actions.push(detail);

                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    $(function() {
        var options = {
            id: "bootstrap-table4",
            url: prefix + "/auditList4",
            detailUrl: prefix + "/detail/{id}",
            // exportUrl: prefix + "/export",
            // queryParams: queryParams,
            sortName: "time",
            sortOrder: "desc",
            modalName: "审计追踪",
            escape: true,
            showPageGo: true,
            rememberSelected: true,
            showSearch: false,
            // pagination: false,
            columns: [{
                field: 'state',
                checkbox: true
            },
                {
                    field: 'auditId',
                    title: '审计编号',
                    visible: false
                },
                {
                    field: 'title',
                    title: '主题',
                    formatter: function(value, row, index) {
                        return $.table.tooltip(value);
                    }
                },
                {
                    field: 'who',
                    title: '操作人员',
                    sortable: true
                },
                {
                    field: 'role',
                    title: '角色'
                },
                {
                    field: 'type',
                    title: '类型',
                    align: 'center',
                    formatter: function(value, row, index) {
                        return $.table.selectDictLabel(datas, value);
                    }
                },
                {
                    field: 'time',
                    title: '时间',
                    sortable: true
                },
                {
                    field: 'what',
                    title: '内容',
                    formatter: function(value, row, index) {
                        var inf = [];
                        inf.push('<span class="fs-5">' + value + '</span><br/>');

                        var params = JSON.parse(row.auditParams);
                        var paramList = [];
                        var count = 0;
                        var limit = 4;
                        var maxValLen = 60; // val 截断长度

                        Object.entries(params).forEach(function([key, val]) {
                            if (key && val) {
                                if (count < limit) {
                                    var displayVal = val;
                                    if (val.length > maxValLen) {
                                        displayVal = val.substring(0, maxValLen) + '...';
                                    }

                                    paramList.push(
                                        '<li><span class="text-secondary">' + key + '</span>: ' +
                                        '<span title="' + val + '">' + displayVal + '</span></li>'
                                    );
                                }
                                count++;
                            }
                        });

                        if (paramList.length > 0) {
                            inf.push('<ul style="padding-left: 1em; margin: 0; list-style-type: disc;">' + paramList.join('') + '</ul>');
                            if (count > limit) {
                                inf.push('<span class="text-muted small">......</span>');
                            }
                        }

                        return inf.join('');
                    }
                },
                {
                    field: 'comment',
                    title: 'comment',
                    formatter: function(value, row, index) {
                        if(value == null || value == '') {
                            return '<a href="javascript:void(0)"> - </a>';
                        }else {
                            return '<a href="javascript:void(0)" title="查看审核意见" onclick="showComment(\'' + value + '\')"><i class="fa fa-search"></i></a>';
                        }
                    }
                },
                {
                    field: 'ip',
                    title: 'ip地址',
                    visible: false
                },
                {
                    field: 'wher',
                    title: '访问方式',
                    visible: false
                },
                {
                    field: 'operStatus',
                    title: '结果',
                    align: 'center',
                    formatter: function(value, row, index) {
                        if (value == 0) {
                            return '<span class="badge badge-primary">成功</span>';
                        } else if (value == 1) {
                            return '<span class="badge badge-danger">失败</span>';
                        }
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        var detail = '<a class="btn btn-warning btn-xs ' + detailFlag + '" href="javascript:void(0)" onclick="$.operate.detail(\'' + row.auditId + '\')"><i class="fa fa-search"></i> 详细</a>';
                        var comment = '<a class="btn btn-info btn-xs ' + commentFlag + '" href="javascript:void(0)" onclick="comment(\'' + row.auditId + '\')"><i class="fa fa-edit"></i> 意见</a>';

                        if (row.comment) {
                            actions.push('<span class="badge badge-success">已评论</span>');
                        } else {
                            actions.push(comment);
                        }
                        actions.push(detail);

                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    function comment(auditId) {
        // 打开评论模态框
        // $.modal.open({
        //     id: "commentModal",
        //     title: "添加审计意见",
        //     url: prefix + "/comment/" + auditId,
        //     width: "600px",
        //     height: "400px",
        //     btns: ['确定', '取消'],
        //     yes: function(index, layero) {
        //         // 提交评论
        //         var form = layero.find("form");
        //         if (form.valid()) {
        //             $.operate.submitForm(form, function() {
        //                 $.modal.close(index);
        //                 $.table.refresh();
        //             });
        //         }
        //     }
        // });

        $.modal.open("Comment", prefix + "/openCommentView?auditId="+auditId, '770', '380');
    }

    function showComment(value) {
        $.modal.alertSuccess(value);
    }

</script>
</body>
</html>